<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust1-warp"
    ClassName="ant-modal-body"
    style="top:5%;overflow-y: hidden"
    :width="1200"
  >
    <a-form :form="form" layout="inline">
      <a-form-item label="名称">
        <a-input placeholder="请输入名称" v-decorator="[ 'name', validatorRules.name]"></a-input>
      </a-form-item>
      <!-- <a-form-item label="类型">
        <a-input placeholder="请输入类别" v-decorator="[ 'category', validatorRules.category]"></a-input>
      </a-form-item>
      <a-form-item label="主键">
        <a-input placeholder="请输入主键" :disabled="isEdit" v-decorator="[ 'key', validatorRules.key]"></a-input>
      </a-form-item>-->
      <a-form-item label="描述">
        <a-input
          placeholder="请输入描述"
          style="width:360px;"
          v-decorator="[ 'description', validatorRules.description]"
        ></a-input>
      </a-form-item>
    </a-form>
    <bpmn-panel ref="bpmnModeler" :processKey="model.key" style="height:650px;" @inputFileType="inputFileTypeMethod"
                @outputFileType="outputFileTypeMethod" @descriptionType="descriptionTypeMethod"/>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import BpmnPanel from '@/components/bpmn/create'
  import {addModel, editModel, getModelSource} from '@/api/activiti'

  export default {
    components: {
      BpmnPanel
    },
    data() {
      return {
        title: '操作',
        confirmLoading: false,
        visible: false,
        isEdit: false,
        form: this.$form.createForm(this),
        model: {},
        validatorRules: {
          name: {
            rules: [
              {required: true, message: '请输入名称!'},
              {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
            ]
          },
          category: {
            rules: [
              {required: true, message: '请输入类型!'},
              {min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur'}
            ]
          },
          key: {
            rules: [
              {required: true, message: '请输入主键!'},
              {min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur'}
            ]
          },
          description: {

            rules: [
              {required: true, message: '请输入描述信息!'},
              {min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur'}
            ]
          }
        },
        inputFileType: [],
        outputFileType: [],
        descriptionType:[]
      }
    },
    methods: {
      clearFields(){
        this.outputFileType= []
        this.descriptionType=[]
      },
      add() {
        // this.edit({})
        this.isEdit = false
        this.visible = true
        this.model = {}
        this.form.resetFields()
        this.clearFields();
        this.$nextTick(() => {
          this.setValues()
        })
      },
      edit(obj) {
        this.isEdit = true
        this.visible = true
        this.form.resetFields()
        this.clearFields();
        this.model = Object.assign({}, obj)
        this.$set(this.model, 'description', JSON.parse(this.model.metaInfo).description)
        this.$nextTick(() => {
          this.setValues()
        })
      },
      setValues() {
        // this.form.setFieldsValue(pick(this.model, 'name', 'category', 'key','company','description'))
        this.form.setFieldsValue(pick(this.model, 'name', 'company', 'description'))

        if (!this.model.id) {
          this.$refs.bpmnModeler.initDiagram()
          return
        }
        const that = this
        getModelSource(this.model.id).then(res => {
          if (res.success) {
            that.$refs.bpmnModeler.loadDiagram(res.result)
          }
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      arrayHandler(arr1,arr2){
        let nodesTemp = arr1.concat(arr2);
        let node = [];
        let temp = {};
        nodesTemp.forEach(item=>{
          if(temp[item.activityId]){
            node.push({
              ...temp[item.activityId],
              ...item
            })
          }else{
            temp[item.activityId] = Object.assign({},item);
          }
        })
        return node;
      },
      handleOk() {
        const that = this
        let nodes = this.arrayHandler(this.outputFileType,this.descriptionType);
        this.$refs.bpmnModeler
          .saveDiagram()
          .then(xml => {
            // 触发表单验证
            this.form.validateFields((err, values) => {
              if (!err) {
                that.confirmLoading = true
                let data = Object.assign({}, that.model, {xml: xml.xml}, values, {node:nodes})
                let result = that.isEdit ? editModel(data) : addModel(data)
                result
                  .then(res => {
                    if (res.success) {
                      that.$message.success(res.message)
                      that.$emit('ok')
                    } else {
                      that.$message.warning(res.message)
                    }
                  })
                  .finally(() => {
                    that.confirmLoading = false
                    that.close()
                  })
              }
            })
          })
          .catch(e => {
            console.log(e)
          })
      },
      handleCancel() {
        this.close()
      },
      //任务节点改变文件格式
      inputFileTypeMethod(properties) {
        this.inputFileType = properties
      },
      outputFileTypeMethod(properties) {
        this.outputFileType = properties

      },
      descriptionTypeMethod(properties){
        this.descriptionType=properties
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>